import React from 'react';
import cn from 'classnames';
import pic from '../../../images/icon-arrow.png';
import styles from './index.less';

const EditListItem = ({
    title,
    required = true,
    children,
    icon,
    showArrow = true,
    bordered = true,
    extra,
    onClick,
    ...rest
}) => (
    <div className={cn(styles.editListItem, { [styles.hasBorder]: bordered })} {...rest}>
        {title && (
            <div className={styles.title}>
                {title}
                {!required && <span style={{ color: '#BBC1CE' }}>（选填）</span>}
            </div>
        )}
        <div className={cn(styles.content, { [styles.hasIcon]: showArrow })} onClick={onClick}>
            {extra === '请选择' || typeof extra === 'undefined' ? <span>{extra || children}</span> : extra || children}
            {showArrow && <>{icon || <img className={styles.icon} alt="" src={pic} />}</>}
        </div>
    </div>
);

export default EditListItem;
